<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>06变换矩阵</title>
		<style type="text/css">
			#firCan {
				display: block;
				border: 1px solid khaki;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="firCan" width="1000" height="500">
			您的浏览器版本过低, 不支持Canvas, 请升级!
		</canvas>
	</body>
	<script type="text/javascript">
		// 1, 获取Canvas
		var firCan = document.getElementById("firCan");
		// 2, 获取 2d渲染上下文
		var context = firCan.getContext('2d');
		
		// 3, 绘制矩形
		context.fillStyle = 'red';
		/*
		 * 变换矩阵: transform(a, b, c, d, e, f)
		 * 六个参数:
		 * 		a		x轴缩放
		 * 		b		y轴倾斜
		 * 		c		x轴倾斜
		 * 		d		y轴缩放
		 * 		e		x轴平移
		 * 		f		y轴平移
		 */
		context.transform(0.5, 0, 0, 1, 100, 0);
//		context.fillRect(100, 100, 200, 100);
		
		context.transform(0.5, 0, 0, 1, 100, 0);
		context.transform(0.5, 0, 0, 1, 100, 0);
		context.fillRect(100, 100, 200, 100);
		
		firCan.width = 1000;
		firCan.height = 500;
		// setTransform
		context.setTransform(0.5, 0, 0, 1, 100, 0);
		context.setTransform(0.5, 0, 0, 1, 100, 0);
		context.setTransform(0.5, 0, 0, 1, 100, 0);
		context.fillRect(100, 100, 200, 100);
		/*
		 * transform 和 setTransform 的区别:
		 * transform: 按照6个参数所代表的矩阵, 对 当前 2d渲染上下文的坐标系进行变换, 会累积.
		 * setTransform: 按照6个参数所代表的矩阵, 对 原始 2d渲染上下文的坐标系进行变换, 不会累积.
		 */
		
	</script>
</html>
